<template>
  <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="30vw"
      :close-on-click-modal="false"
      :before-close="onClickBtnClose"
      draggable
  >
    <el-form ref="refForm" label-width="100px" :inline="false" :model="subForm" :rules="formRules" class="pr-5">
      <el-form-item label="角色" prop="name" :rules="formRules.isNotNull('请填写角色')" label-position="left">
        <el-input v-model="subForm.name" maxlength="20" placeholder="角色"/>
      </el-form-item>
      <el-form-item label="KEY" prop="slug" :rules="formRules.isNotNull('请填写KEY')" label-position="left">
        <el-input v-model="subForm.slug" maxlength="20" placeholder="key"/>
      </el-form-item>
      <el-form-item label="菜单" prop="menus" :rules="formRules.isNotNull('请选择菜单')" label-position="left">
        <el-tree
            ref="refTree"
            :data="treeData"
            show-checkbox
            default-expand-all
            :default-checked-keys="subForm.menus"
            node-key="id"
            :props="{label: 'title'}"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onClickBtnClose">取 消</el-button>
        <el-button type="primary" @click="onClickBtnConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {addRoleReq, editRoleReq} from "@/api/setting"
import {elMessage, useElement} from "@/hooks/use-element"

const {formRules, dialogTitle, dialogVisible} = useElement()
const emit = defineEmits(["formSub", "hideComp"]);
const props = defineProps({
  treeData: {
    required: true,
    type: Array
  }
});

const refForm = ref();
const refTree = ref();
const roleId = ref(0);

interface formType {
  name: string
  slug: string
  menus: number[]
}
const subForm = reactive<formType>({
  name: "",
  slug: "",
  menus: []
});

//
const showModal = (id, detailData) => {
  if (id) {
    dialogTitle.value = `编辑【${detailData.name}】`;
    _reSetData(detailData);
    roleId.value = id;
    subForm.menus = _getLeafMenu(detailData.menus)
  } else {
    dialogTitle.value = "添加菜单";
  }
  dialogVisible.value = true;
};

const onClickBtnConfirm = () => {
  subForm.menus = refTree.value.getCheckedKeys(false);
  const data = JSON.parse(JSON.stringify(subForm));
  data.menus = refTree.value.getCheckedNodes(false, true).map(v => v.id);
  refForm.value.validate((valid) => {
    if (valid) {
      if (roleId.value) {
        editRoleReq(roleId.value, data).then(_ => {
          elMessage("编辑成功");
          emit("formSub");
          emit("hideComp");
        });
      } else {
        addRoleReq(data).then(_ => {
          elMessage("添加成功");
          emit("formSub");
          emit("hideComp");
        });
      }
    }
    return valid;
  });
};

//关闭弹框
const onClickBtnClose = () => {
  emit("hideComp");
};

//
function _getLeafMenu(menus) {
  const temp :number[] = [];
  const pids = menus.map(v => v.pid);
  menus.forEach(v => {
    if (!pids.includes(v.id)) {
      temp.push(v.id);
    }
  });
  return temp;
}

const _reSetData = (row) => {
  Object.keys(row).forEach((fItem) => {
    Object.keys(subForm).forEach((sItem) => {
      if (fItem === sItem) {
        subForm[sItem] = row[sItem];
      }
    });
  });
};

//
defineExpose({
  showModal
});
</script>

<style lang="scss" scoped>

</style>
